﻿<!DOCTYPE html>
<html ng-app="app1">
<head>
    <title>Angular Hello World</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello World</title>
    <link rel="stylesheet" href="css/index.css">
    <style>[ng-cloak] { display: none; }</style>
</head>
<body>
    <section ng-init="members = [{
        firstname:'william',
        age:30,
        contact_email:'xxxx',
        shirt_size: 'xxxxx'
    },{
        firstname:'william2',
        age:31,
        contact_email:'xxxx',
        shirt_size: 'xxxxx'
    }]">
        <script type="text/ng-template" id="index.html">
            <h1>Hello World</h1>
        </script>
        <script type="text/ng-template" id="list.html">
            <h1>Inner Page</h1>
        </script>
        <script type="text/ng-template" id="detail.html">
            Detail Page, id = {{id}}
        </script>
        <ul>
            <li><a href="#/">go to index</a></li>
            <li><a href="#/list">go to list page</a></li>
            <li><a href="#/detail/999">go to detail page</a></li>
            <li><a href="#/example1">example1</a></li>
        </ul>
        <div id="content" ng-view>loading...</div>

        <div ng-controller="index">
            <div ng-repeat="member in members track by $index">
                <table>
                    <tr><td>姓名</td><td class="js_groupmember-firstname--0-">{{member.firstname}}</td></tr>
                    <tr><td>性別</td><td class="js_groupmember-gender--0-">{{member.gender}}</td></tr>
                    <tr><td>年齡</td><td class="js_groupmember-age--0-">{{member.age}}</td></tr>
                    <tr><td>電郵</td><td class="js_groupmember-contact_email--0-">{{member.contact_email}}</td></tr>
                    <tr><td>T-shirt尺碼 </td><td class="js_groupmember-shirt_size--0-">{{member.shirt_size}}</td></tr>
                    <tr><td>价格 </td><td><input type="text" ng-model="member.price" /></td></tr>
                </table>
            </div>
            <button ng-click="_click()">价格相加</button> {{result}}
        </div>


<div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">
  I have {{friends.length}} friends. They are:
  <input type="search" ng-model="q" placeholder="filter friends..." />
  <ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>


    </section>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
